<template>
	<div id="discussions" >
		<mt-header fixed title="讨论区">
        			<router-link to="/" slot="left">
        				<mt-button icon="back">返回</mt-button>
        			</router-link>
        			<mt-button icon="more" slot="right"></mt-button>
        		</mt-header>
		<div id="head">
			<img src="../../assets/logo3.png" />
			<div id="discussionAreaName">递递讨论区</div>
		</div>
		<div id="body">
			<div id="bodyIn">
				<div class="nav">
                      <mt-button size="small" @click.native.prevent="active = 'tab-container1'">热门讨论</mt-button>
                      <mt-button size="small" @click.native.prevent="active = 'tab-container2'">最新讨论</mt-button>
                      <mt-button size="small" @click.native.prevent="active = 'tab-container3'">精彩讨论</mt-button>
                    </div>
                    <div class="page-tab-container">
                      <mt-tab-container class="page-tabbar-tab-container" v-model="active" swipeable>
                        <mt-tab-container-item id="tab-container1">
                          <mt-cell id="cell"><a @click="comment">南门快递区整顿有关事项  （2017/04）</a><br> </mt-cell>
                            <mt-cell id="cell"><a @click="comment">南门快递区整顿有关事项  （2017/04）</a><br> </mt-cell>
                              <mt-cell id="cell"><a >长期代拿，价钱可议  （2017/04）</a><br> </mt-cell>
                                <mt-cell id="cell"><a>@所有人！速来领取！  （2017/04）</a><br> </mt-cell>
                                  <mt-cell id="cell"><a>一元爱心包裹活动 （2017/04）</a><br> </mt-cell>
                                    <mt-cell id="cell"><a >优惠券派送群+vip特权   （2017/04）</a><br> </mt-cell>
                                     <mt-cell id="cell"><a>@所有人！速来领取！  （2017/04）</a><br> </mt-cell>


                        </mt-tab-container-item>
                        <mt-tab-container-item id="tab-container2" class="page-tabbar-tab-container">
                          <mt-cell><a @click="comment">关于学院快递整顿问题 （2017/03）</a></mt-cell>
                            <mt-cell>关于快递代拿相关问题 （2017/03）</mt-cell>
                              <mt-cell>请问圆通快递在东门吗？ （2017/03）</mt-cell>
                                <mt-cell>为什么快递现在在东门拿了（2017/03）</mt-cell>
                                  <mt-cell>关于学院快递整顿问题 （2017/03）</mt-cell>
                                    <mt-cell>关于学院快递整顿问题 （2017/03）</mt-cell>
                                    <mt-cell>为什么快递现在在东门拿了（2017/03）</mt-cell>
                        </mt-tab-container-item>
                        <mt-tab-container-item id="tab-container3" class="page-tabbar-tab-container">
                                                   <mt-cell>关于学院快递整顿问题 （2017/03）</mt-cell>
                                                      <mt-cell>五一放几天假？补课吗？（2017/03）</mt-cell>
                                                        <mt-cell>寄省外哪家快递比较便宜？ （2017/03）</mt-cell>
                                                          <mt-cell>为什么快递现在在东门拿了（2017/03）</mt-cell>
                                                            <mt-cell>关于学院快递整顿问题 （2017/03）</mt-cell>
                                                              <mt-cell>关于学院快递整顿问题 （2017/03）</mt-cell>
                                                              <mt-cell>为什么快递现在在东门拿了（2017/03）</mt-cell>
                        </mt-tab-container-item>
                      </mt-tab-container>
                    </div>
                </div>
                <div id="buttons">
                	<mt-button size="small">刷&nbsp&nbsp&nbsp新</mt-button>
                	<mt-button size="small">下一页</mt-button>
                </div>
			</div>
			<div id="foot">
				<img src="../../assets/tabbar1.png"/>
				<button id="btn1" class="btns"  @click="sc">发表讨论&nbsp+</button>
				<button id="btn2" class="btns" >我的讨论&nbsp@</button>


			</div>
		</div>
	</div>
</template>

<script>
import Vue from 'vue'
import { MessageBox } from 'mint-ui';
import { mapGetters } from 'vuex'
import { mapState } from 'vuex'
import { mapMutations } from 'vuex'
import { mapActions } from 'vuex'
import { Header } from 'mint-ui';
import { TabContainer, TabContainerItem } from 'mint-ui';
import { Button } from 'mint-ui';

export default {
	name: 'page-tab-container',
	data (){
    	return{
    		active: 'tab-container1',
    		 showRegister : false
    	}
    },
    methods:{
            comment(){
                     this.$router.push('./commentone')
                  },
                  sc(){
                  this.$router.push('./shangchuan')
                  }
	}
}
Vue.component(TabContainer.name, TabContainer);
Vue.component(TabContainerItem.name, TabContainerItem);
Vue.component(Button.name, Button);
</script>

<style lang="css" scoped>
#cell a{
color:black;

}
#head{
	width:100%;
	height:100px;
	//border:1px solid black;
	background:#1E90FF;
	margin-top:5px;
}

#head img{
	width:100px;
	position:absolute;
	left:10px;

}

#discussionAreaName{
	width:200px;
	height:50px;
	background:yellow;
	border-radius: 8px;
	position:absolute;
	top:25px;
	right:25px;
	box-shadow:2px 2px 2px #8c8d8d;
    -moz-box-shadow:2px 2px 2px #8c8d8d;
    -webkit-box-shadow:2px 2px 2px #8c8d8d;
	font-size:22px;
	color:white;
	font-weight:bolder;
	line-height:50px;
}

#body{
	width:100%-2px;
	height:380px;
	border:1px solid gray;
}

#bodyIn{
	width:310px;
	height:310px;
	border:1px solid gray;
	margin:0 auto;
	margin-top:14px;
	border-radius: 8px;
}

.mint-button--small{
	background:#1E90FF;
	color:white;
}

.mint-cell{
	min-height: 35px;
}

span .mint-cell-text{
	font-size:14px;
	vertical-align: left;
}

.item {
    display: inline-block;
}

.nav {
    padding: 10px;
}

.link {
    color: inherit;
    padding: 20px;
    display: block;
}

#buttons{
	margin-top:10px;
	margin-right:15px;
	float:right;
}

#foot{
	width:100%;
	height:100px;
	background:#1E90FF;
}

#foot img{
	width:30px;
	height:30px;
	float:left;
	margin-top:13px;
	margin-left:30px;
}

.btns{
	border-width: 1px;
    border-style: solid;
    height: 35px;
    padding: 0;
    width: 120px;
    cursor: pointer;
    font:15px Helvetica;
    margin-top:12px;
    background:white;
    color:#1E90FF;
    border-radius: 7px;
    font-weight:bolder;
}

.popup-content{
    width:320px;
    height:530px;
    color:black;

}
.popup-content img{
    width:300px;
}
</style>